<template>
  <div class="current-root">

    <div class="date-rang section" desc="2、入住日期">
      <div class="start">
        <div class="date">
          <span class="tip">入住</span>
          <span class="time">8月25日</span>
        </div>
      </div>
      <div class="stay">
        (共1晚)
      </div>
      <div class="end">
        <div class="date">
          <span class="tip">离店</span>
          <span class="time">8月26日</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {useCityStore} from "@/stores/modules/city";

const router = useRouter();
const cityStore = useCityStore();


function cityClick() {
  console.log('city点击')
  router.push('./city')
}

function positionClick() {
  // 浏览器对象 navigator
  navigator.geolocation.getCurrentPosition(
      res => {
        console.log('获取位置成功')
        console.log(res)
      },
      err => {
        console.log('获取位置成功')
        console.log(err)
      }, {
        timeout: 3000,
        enableHighAccuracy: true,
        maximumAge: 0
      })
}
</script>

<style lang="less" scoped>

.current-root {
  .section {
    display: flex;

    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;

    .start {
      flex: 1;
      display: flex;
      align-items: center;

    }
    .stay {
      flex: 1;
      font-size: 14px;
      color: #999;
      text-align: center;
    }
    .end {
      flex: 1;
      display: flex;
      margin-left: 30px;
    }

    .date {
      display: flex;
      flex-direction: column;
      .tip {
        text-align: center;
        font-size: 14px;
        color: #999;
      }

      .time {
        margin-top: 3px;
      }
    }
  }

  .date-rang {

    .stay {

    }
  }
}

</style>